package com.example.composeanimation

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.tween
import androidx.compose.animation.core.updateTransition
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableLongStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composeanimation.ui.theme.JetpackComposeBasicTheme
import com.example.composeanimation.ui.theme.Purple80

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeBasicTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    HomeTabIndicator()
                }
            }
        }
    }

    @Composable
    fun colorAnimation() {


        val tabPage = remember {
            mutableIntStateOf(1)
        }


        // 1、Animate this color change
        val backgroundColor by animateColorAsState(
            targetValue =
            if (tabPage.intValue == 1) Purple80 else Color.Green, label = ""
        )

        Scaffold(
            containerColor = backgroundColor
        ) { innerPadding ->
            Column(modifier = Modifier.padding(innerPadding)) {
                Row {
                    TextButton(onClick = {
                        tabPage.intValue = 1
                    }, modifier = Modifier.weight(1f)) {
                        Text(text = "Left")
                    }

                    TextButton(onClick = {
                        tabPage.intValue = 2
                    }, modifier = Modifier.weight(1f)) {
                        Text(text = "Right")
                    }
                }


                Surface(
                    color = backgroundColor,
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight()
                ) {

                }
            }
        }


    }


    @Composable
    fun visibleAnimation() {
        // https://www.bilibili.com/video/BV1ob4y1a7ad?p=56&spm_id_from=pageDriver&vd_source=e07cc8cc94eb22bd76722071b03cd199


        val isVisibility = remember {
            mutableStateOf(true)
        }


        // 2、Animate this visibility change


        Scaffold(
        ) { innerPadding ->
            Column(modifier = Modifier.padding(innerPadding)) {
                Row {
                    TextButton(onClick = {
                        isVisibility.value = true
                    }, modifier = Modifier.weight(1f)) {
                        Text(text = "Left")
                    }

                    TextButton(onClick = {
                        isVisibility.value = false
                    }, modifier = Modifier.weight(1f)) {
                        Text(text = "Right")
                    }
                }


                Row(modifier = Modifier.background(color = Color.Blue)) {
                    Icon(
                        imageVector = Icons.Default.Edit,
                        contentDescription = null,
                        tint = Color.White
                    )
                    AnimatedVisibility(visible = isVisibility.value) {
                        Text(
                            text = "Edit",
                            Modifier.padding(start = 8.dp, top = 3.dp),
                            color = Color.White
                        )
                    }
                }

            }
        }


    }


    @Composable
    fun visibleAnimation2() {

        // https://www.bilibili.com/video/BV1ob4y1a7ad?p=56&spm_id_from=pageDriver&vd_source=e07cc8cc94eb22bd76722071b03cd199

        val isVisibility = remember {
            mutableStateOf(true)
        }


        // 2、Animate this visibility change


        Scaffold(
        ) { innerPadding ->
            Column(modifier = Modifier.padding(innerPadding)) {
                Row {
                    TextButton(onClick = {
                        isVisibility.value = true
                    }, modifier = Modifier.weight(1f)) {
                        Text(text = "Left")
                    }

                    TextButton(onClick = {
                        isVisibility.value = false
                    }, modifier = Modifier.weight(1f)) {
                        Text(text = "Right")
                    }
                }

                AnimatedVisibility(
                    visible = isVisibility.value,
                    enter = slideInVertically(
                        initialOffsetY = { fullHeight: Int -> -fullHeight * 3 },
                        // LinearOutSlowInEasing: 传入元素使用减速缓和设置动画，减速缓和以峰值速度(元素移动的最快点)开始过渡，并在静止时结束。
                        // 越来越慢
                        animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing)
                    ),
                    exit = slideOutVertically(
                        // 通过从偏移量0向上滑动到 targetOffsetY 退出
                        targetOffsetY = { fullHeight: Int ->
                            -fullHeight * 3
                        },
                        // FastOutSlowInEasing: 退出屏幕的元素使用加速度缓和，从静止开始，以峰值速度结束。
                        // 越来越快
                        animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing)
                    )
                ) {
                    Row(
                        modifier = Modifier
                            .background(color = Color.Blue)
                            .fillMaxWidth()
                    ) {
                        Icon(
                            imageVector = Icons.Default.Edit,
                            contentDescription = null,
                            tint = Color.White
                        )
                        Text(
                            text = "Edit",
                            Modifier.padding(start = 8.dp, top = 3.dp),
                            color = Color.White
                        )
                    }
                }


            }
        }


    }

    @Composable
    fun HomeTabIndicator() {
        // TODO 这个例子好多细节没有展示出来，所以这个例子失败了
        // https://www.bilibili.com/video/BV1ob4y1a7ad?p=58&spm_id_from=pageDriver&vd_source=e07cc8cc94eb22bd76722071b03cd199
        // 自定义选项卡知识器
        //


        val tabPage = remember {
            mutableIntStateOf(0)
        }

        val transition = updateTransition(targetState = tabPage, label = "Tab indicator")

//        val indicatorLeft by transition.animateDp(label = "Indicator left") {tabPage->
//
//        }

        Scaffold(
        ) { innerPadding ->
            Column(modifier = Modifier.padding(innerPadding)) {
//                Row {
//                    TextButton(onClick = {
//                    }, modifier = Modifier.weight(1f)) {
//                        Text(text = "Left")
//                    }
//
//                    TextButton(onClick = {
//                    }, modifier = Modifier.weight(1f)) {
//                        Text(text = "Right")
//                    }
//                }

                Box {
                   Row {
                       TabRow(selectedTabIndex = tabPage.intValue, indicator = {
                           Log.e("young_test9090909", "i = ${it}")

                       }) {
                           TextButton(onClick = {
                               tabPage.intValue = 0
                           }, modifier = Modifier.weight(1f)) {
                               Text(text = "Left")
                           }

                           TextButton(onClick = {
                               tabPage.intValue = 1
                           }, modifier = Modifier.weight(1f)) {
                               Text(text = "Right")
                           }
                       }
                   }
                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .offset(x = 0.dp)
                            .width(100.dp)
                            .padding(4.dp)
                            .border(
                                border = BorderStroke(2.dp, Color.Red),
                                shape = RoundedCornerShape(4.dp)
                            )
                    ) {

                    }
                }


            }
        }


    }
}
